<template>
  <div class="transac">
    <div class="bg-c-fff">
      <h2 class="right-title rel">消息管理</h2>
      <div class="right-box">
        <choose-type typename="消息类型" valuename="msgType" :itemlist="typelist" :active="typeActive" @typechanged="onOptionChanged"></choose-type>
        <choose-type typename="读取状态" valuename="readType" :itemlist="readlist" :active="readActive" @typechanged="onOptionChanged"></choose-type>
        <table width="100%" class="auto">
          <tr>
            <th>发送时间</th>
            <th>发送人</th>
            <th>接收人</th>
            <th>读取状态</th>
            <th>消息类型</th>
            <th>操作</th>
          </tr>
          <tr v-for="item in msgList">
            <td>{{item.createTime}}</td>
            <td>{{item.sendName}}</td>
            <td>{{item.reciveName}}</td>
            <td>{{item.readType | readTypeFilter}}</td>
            <td>{{item.messageType | messageTypeFilter}}</td>
            <td>
              <button class="blue-button small-btn-css" @click="onDetailsClick(item)">查看详情</button>
            </td>
          </tr>
        </table>
        <pagination :index="pageIndex" :total="pageTotal" v-show="this.msgList!=0" @pagechange="onPageChange"></pagination>
      </div>
      <vodal :show="msgShow" animation="zoom" :width="420" :height="300" @hide="msgShow = false">
        <div class="vodal-box">
          <h2>查看详情</h2>
          <div class="con">{{msgCon}}</div>
        </div>
      </vodal>
    </div>
  </div>
</template>
<script type="text/javascript">
import Calendar from '../components/Calendar'
import Pagination from '../components/Pagination'
import ChooseType from '../components/ChooseType'
export default {
  components: {
    Pagination,
    Calendar,
    ChooseType
  },
  data() {
    return {
      pageIndex: 1,
      pageTotal: 0,
      msgShow: false,
      typeActive: '',
      typelist: [{
        value: '',
        text: '全部'
      }, {
        value: 1,
        text: '接收消息'
      }, {
        value: 0,
        text: '发送消息'
      }],
      readActive: '',
      readlist: [{
        value: '',
        text: '全部'
      }, {
        value: 1,
        text: '已读'
      }, {
        value: 0,
        text: '未读'
      }],
      msgList: [],
      msgCon: ''
    }
  },
  mounted() {
    this.onPageChange(1)
  },
  methods: {
    onOptionChanged(type, value) {
      if (type === 'msgType') {
        this.typeActive = value
      }
      if (type === 'readType') {
        this.readActive = value
      }
      this.getMsgData(1)
    },
    onPageChange(n) {
      this.getMsgData(n)
    },
    getMsgData(n) {
      this.$http.get('/message/query/message', {
        params: {
          userType: 1,
          msgState: this.typeActive,
          readType: this.readActive,
          page: n,
          rows: 10
        }
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.pageIndex = n
          this.pageTotal = Math.ceil(data.data.total / 10)
          this.msgList = data.data.rows
        } else {
          console.log(data.data.msg)
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    onDetailsClick(item) {
      this.msgShow = true
      this.msgCon = item.msgContent
      if (item.messageType === 1) {
        this.$http.post('/message/modify/read/type', {
          messageId: item.id
        }).then(data => {
          if (data.data.httpCode === 200) {
            if (item.messageType === 1 && item.readType === 0) {
              this.msgList.forEach((i) => {
                if (i.id === item.id) {
                  i.readType = 1
                }
              })
            }
          } else {
            console.log(data.data.msg)
            this.$toasted.show(data.data.msg)
          }
        }).catch(err => {
          console.log(err)
        })
      }
    }
  },
  filters: {
    readTypeFilter(v) {
      if (v === 0) {
        return '未读'
      }
      if (v === 1) {
        return '已读'
      }
    },
    messageTypeFilter(v) {
      if (v === 0) {
        return '发送'
      }
      if (v === 1) {
        return '接收'
      }
    }

  }
}

</script>
<style type="text/css" scoped>
.right-box {
  padding: 40px 30px;
  color: #666666;
  line-height: 30px;
  margin-bottom: 20px;
}

table {
  margin-top: 20px;
}

table th,
table td {
  width: 132px;
}

table td button {
  display: block;
  background-color: #3881f2;
  color: #fff;
}

table tr:nth-of-type(odd) a {
  background-color: #6ba5ff;
}

.vodal-box h2 {
  background-color: #d8e7ff;
  font-size: 14px;
  font-weight: bold;
  line-height: 40px;
  text-indent: 40px;
}

.vodal-box .con {
  margin: 30px 20px;
  padding: 10px 14px;
  border: 1px solid #ddd;
  line-height: 30px;
  height: 200px;
  overflow: auto;
}

.small-btn-css {
    margin-left: 25px;
}

</style>
